<template>
  <view class="container">
    <!-- 地址列表 -->
    <scroll-view 
		scroll-y 
		class="address-list" 
		refresher-enabled
		:refresher-triggered="isRefreshing"
		@refresherrefresh="onRefresh">
		
      <view 
        class="address-item"
        v-for="(address, index) in addressList" 
        :key="index"
        :class="{ 'default': address.isDefault }"
      >
        <!-- 地址信息 -->
        <view class="info" @tap="selectAddress(address)">
          <view class="user-info">
            <text class="name">{{ address.name }}</text>
            <text class="phone">{{ address.phone }}</text>
          </view>
          <view class="address-detail">{{ address.address }}</view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="actions">
          <view class="default-switch">
            <switch 
              :checked="address.isDefault"
              @change="setDefault(index)"
              color="#ff5062"
            />
            <text>设为默认</text>
          </view>
          <view class="buttons">
            <view class="edit-btn btn-click" @tap="editAddress(address)">
              <text class="iconfont icon-edit"></text>
              <text>编辑</text>
            </view>
            <view class="delete-btn btn-click" @tap="deleteAddress(address.id)">
              <text class="iconfont icon-delete"></text>
              <text>删除</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部添加按钮 -->
    <view class="add-btn btn-click" @click="showAddressForm(null)">
      <text>新增地址</text>
    </view>

    <!-- 地址编辑弹出层 -->
    <u-popup
      :show="showPopup"
      @close="closePopup"
      mode="bottom"
      :round="16"
      :safeAreaInsetBottom="true"
    >
      <view class="popup-form">
        <view class="popup-header">
          <text>{{ form.id ? '编辑地址' : '新增地址' }}</text>
          <text class="close" @tap="closePopup">×</text>
        </view>
        
        <scroll-view scroll-y class="popup-content">
          <view class="form-item">
            <text class="label">收货人</text>
            <input 
              type="text"
              v-model="form.name"
              placeholder="请输入收货人姓名"
              class="input"
            />
          </view>
          
          <view class="form-item">
            <text class="label">手机号码</text>
            <input 
              type="number"
              v-model="form.phone"
              placeholder="请输入手机号码"
              maxlength="11"
              class="input"
            />
          </view>
          
          <view class="form-item">
            <text class="label">详细地址</text>
            <textarea 
              v-model="form.address"
              placeholder="请输入详细地址，如街道、门牌号等"
              class="textarea"
            />
          </view>
        </scroll-view>
        
        <view class="popup-footer">
          <button class="submit-btn" @tap="saveAddress">保存</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { AddressUtils } from '../../utils/addressUtils'

onMounted(() => {
	// 获取收获地址
	// addressList.value = AddressUtil.getAddressList()
	AddressUtils.getAll(data => {
		addressList.value = data
	})
})

// 下拉刷新
const isRefreshing = ref(false)
// 地址列表数据
const addressList = ref([])
// 表单数据
const showPopup = ref(false)
const form = ref({id: '', name: '', phone: '', address: ''})

// 下拉刷新
const onRefresh = async () => {
  isRefreshing.value = true
  // 模拟刷新数据
  AddressUtils.reload(data => {
	  addressList.value = data
	  isRefreshing.value = false
  })
}

// 选择地址
const selectAddress = (address) => {
  // 触发地址选择事件
  uni.$emit('addressSelected', address)
  // 返回上一页
  uni.navigateBack()
}

// 设置默认地址
const setDefault = (index) => {
  AddressUtils.setDefault(addressList.value[index].id, data => {
	  addressList.value = data
  })
}

// 显示地址表单
const showAddressForm = (address) => {
  if (address) form.value = { ...address }
  else form.value = {id: '', name: '', phone: '', address: ''}
  showPopup.value = true
}

// 关闭弹出层
const closePopup = () => {
  showPopup.value = false
  form.value = {id: '', name: '', phone: '', address: ''}
}

// 保存地址
const saveAddress = () => {
  // 表单验证
  if (!form.value.name) {
    uni.showToast({title: '请输入收货人姓名', icon: 'none'})
    return
  }
  if (!form.value.phone) {
    uni.showToast({title: '请输入手机号码', icon: 'none'})
    return
  }
  if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
    uni.showToast({title: '手机号码格式不正确', icon: 'none'})
    return
  }
  if (!form.value.address) {
    uni.showToast({title: '请输入入详细地址', icon: 'none'})
    return
  }

  if (form.value.id) {
    // 编辑现有地址
    AddressUtils.updateById(form.value.id, form.value, data => {
		addressList.value = data
	})
  } 
  else {
    // 新增地址
    AddressUtils.create(form.value, data => {
		addressList.value.push(data)
	})
  }
  closePopup()
}

// 修改编辑地址方法
const editAddress = (address) => {
  showAddressForm(address)
}

// 删除地址
const deleteAddress = (id) => {
  uni.showModal({title: '提示', content: '确定要删除该地址吗？',
    success: (res) => {
      if (res.confirm) {
		AddressUtils.deleteById(id, data => {
			addressList.value = data
		})
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 85vh;
  background-color: #f7f7f7;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.header {
  padding: 20rpx 30rpx;
  background: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  
  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
}

.address-list {
  padding: 20rpx;
  width: 95%;
  
  .address-item {
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    animation: slideIn 0.3s ease-out;
    
    &.default {
      border: 2rpx solid #ff5062;
    }
    
    .info {
      margin-bottom: 20rpx;
      
      .user-info {
        margin-bottom: 12rpx;
        
        .name {
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
          margin-right: 20rpx;
        }
        
        .phone {
          font-size: 28rpx;
          color: #666;
        }
      }
      
      .address-detail {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
      }
    }
    
    .actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .default-switch {
        display: flex;
        align-items: center;
        
        switch {
          transform: scale(0.8);
          margin-right: 8rpx;
        }
        
        text {
          font-size: 26rpx;
          color: #666;
        }
      }
      
      .buttons {
        display: flex;
        gap: 20rpx;
        
        .edit-btn, .delete-btn {
          display: flex;
          align-items: center;
          padding: 12rpx 20rpx;
          border-radius: 8rpx;
          font-size: 26rpx;
          
          .iconfont {
            font-size: 28rpx;
            margin-right: 6rpx;
          }
          
          &:active {
            opacity: 0.8;
          }
        }
        
        .edit-btn {
          background: #f5f5f5;
          color: #666;
        }
        
        .delete-btn {
          background: rgba(255,80,98,0.1);
          color: #ff5062;
        }
      }
    }
  }
}

.add-btn {
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: calc(30rpx + env(safe-area-inset-bottom));
  height: 88rpx;
  background: linear-gradient(135deg, #ff6b81, #ff4757);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(255,75,87,0.3);
  
  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.popup-form {
  background: #fff;
  min-height: 65vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  
  .popup-header {
    position: relative;
    padding: 30rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    border-bottom: 1rpx solid #eee;
    
    .close {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40rpx;
      color: #999;
      padding: 10rpx;
    }
  }
  
  .popup-content {
    flex: 1;
    padding: 30rpx;
    
    .form-item {
      margin-bottom: 40rpx;
      width: 86%;

      .label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
        font-weight: 500;
      }
      
      .input {
        width: 100%;
        height: 88rpx;
        background: #f8f8f8;
        border-radius: 12rpx;
        padding: 0 30rpx;
        font-size: 28rpx;
        color: #333;
        
        &::placeholder {
          color: #999;
        }
      }
      
      .textarea {
        width: 100%;
        height: 180rpx;
        background: #f8f8f8;
        border-radius: 12rpx;
        padding: 20rpx 30rpx;
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
        
        &::placeholder {
          color: #999;
        }
      }
    }
  }
  
  .popup-footer {
    padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
    border-top: 1rpx solid #eee;
    
    .submit-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: linear-gradient(135deg, #ff6b81, #ff4757);
      border-radius: 44rpx;
      font-size: 30rpx;
      color: #fff;
      font-weight: 500;
      border: none;
      
      &:active {
        opacity: 0.9;
        transform: scale(0.99);
      }
    }
  }
}
</style> 